<template>
  <div class="employment-industry-three">
    <echarts-temp :options="options"></echarts-temp>
  </div>
</template>
<script>
export default {
  name: 'EmploymentIndustryThree',

  data() {
    return {
      options: {}
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    getInitData() {
      var yearData = [
        {
          year: '2019',
          data: [
            ['24', '23', '45', '56', '67', '21', '67'],
            ['3', '25', '15', '55', '66', '24', '77']
          ]
        },
        {
          year: '2020',
          data: [
            ['2', '24', '55', '51', '127', '21', '2'],
            ['32', '35', '2', '55', '66', '24', '77']
          ]
        }
      ]
      // 制定配置项和数据
      this.options = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
          trigger: 'axis',
          confine: true
        },
        // 图例组件
        legend: {
          // 如果series里有name值的话，可以省略此处的data
          // data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          textStyle: {
            color: '#4c9bfd' // 图例文字颜色
          },
          right: '10%' // 距离右边10%
        },
        // 设置网格样式
        grid: {
          top: '20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show: false, // 显示边框
          borderColor: '#012f4a', // 边框颜色
          containLabel: true // 包含刻度文字在内
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 去除轴内间距
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisTick: {
            show: false // 去除刻度线
          },
          axisLabel: {
            color: '#4c9bfd' // 文字颜色
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            show: true // 去除轴线
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false // 去除刻度
          },
          axisLabel: {
            color: '#4c9bfd' // 文字颜色
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,.2)'
            },
            show: true // 去除轴线
          }
        },
        series: [
          {
            name: '邮件营销',
            type: 'line',
            // stack: true,//数据堆叠
            // 可以让线变得圆滑
            smooth: true,
            data: yearData[0].data[0]
          },
          {
            name: '联盟广告',
            type: 'line',
            // stack: true,
            smooth: true,
            data: yearData[1].data[1]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.employment-industry-three {
  height: 100%;
  height: 100%;
}
</style>
